<template>
  <div>
    <JcTitle name="报工单详情" icon></JcTitle>
    <div class="content">
      <el-form v-if="amountVis" ref="purchaseRef" :model="production" label-width="100px" disabled>
        <el-form-item label="单据日期">
          <el-input v-model.trim="production.fdate"/>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model.trim="production.fbillNo"/>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-input v-model.trim="production.fbilltype"/>
        </el-form-item>
        <el-form-item label="工单编号">
          <el-input v-model.trim="production.fsrcbillno"/>
        </el-form-item>
        <el-form-item label="工单数量">
          <el-input v-model.trim="production.fmoqty"/>
        </el-form-item>
        <el-form-item label="生产车间">
          <el-input v-model.trim="production.fworkshop"/>
        </el-form-item>
        <el-form-item label="助记码">
          <el-input v-model.trim="production.fmodel"/>
        </el-form-item>
        <el-form-item label="物料编码">
          <el-input v-model.trim="production.fnumber"/>
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model.trim="production.fname"/>
        </el-form-item>
        <el-form-item label="物料规格">
          <el-input v-model.trim="production.fspecificaTion"/>
        </el-form-item>
        <el-form-item label="物料描述">
          <el-input v-model.trim="production.fdescripTion"/>
        </el-form-item>
        <el-form-item label="汇总合计">
          <el-input v-model.trim="production.huizongSum"/>
        </el-form-item>
        <el-form-item label="金额合计">
          <el-input v-model.trim="production.amountSum"/>
        </el-form-item>
        <el-form-item label="单据状态">
          <el-tag :type="production.stateColor">{{ production.fdocumentstatus }}</el-tag>
        </el-form-item>
        <el-form-item label-width="100px">
          <el-button type="success" @click="dialogWorker=true" :disabled="false">批量报工</el-button>
        </el-form-item>
      </el-form>
      <div>
        <sx-table
            :table-data="tableData"
            :table-header="tableHeader"
            table-selection
            @selectionChange="handleSelectAll"
        >
          <!--          报工数量-->
          <template v-slot:billSlot="col">
            <el-input-number
                v-model.trim="col.scope.row.fworkqtyview"
                size="mini"
                :min="0"
                :disabled="isDisabled"
                controls-position="right"
                @change="handelPrice(col.scope.$index)"
            />
          </template>
          <!--          报工人-->
          <template v-slot:btnStates="col">
            <el-select v-model="col.scope.row.fworker" size="mini" filterable>
              <el-option v-for="item in tableData2"
                         :key="item.id" :label="item.fjobnumber + '-' +item.fname"
                         :value="item.fname"/>
            </el-select>
          </template>
          <!--          备注-->
          <template v-slot:btnState="col">
            <el-input v-model.trim="col.scope.row.fremark" size="mini" :disabled="isDisabled"/>
          </template>
          <!--          操作-->
          <template v-slot:tagSlot="col">
            <el-button @click="copyHang(col.scope.$index)">复制行</el-button>
            <el-button @click="delHang(col.scope.$index)" type="danger">删除</el-button>
          </template>
        </sx-table>
        <div style="margin-top: 20px;text-align: center">
          <el-button class="clasBtn" :disabled="isDisabled" type="primary" @click="save">保 存</el-button>
          <el-button class="clasBtn" :disabled="isDisabled" type="warning" @click="submit(1)">提 交</el-button>
          <el-button class="clasBtn" type="warning" @click="submit(2)">反 提 交</el-button>
          <el-button class="clasBtn" type="warning" @click="audit(1)">审 核</el-button>
          <el-button class="clasBtn" type="warning" @click="audit(2)">反 审 核</el-button>
          <el-button class="clasBtn" type="danger" @click="delorder">删除</el-button>
        </div>
      </div>
    </div>
    <el-dialog
        title="批量报工"
        model
        :visible.sync="dialogWorker"
        :close-on-click-modal="false"
        width="500px"
        top="5vh"
    >
      <div>
        <el-select v-model="fworker" filterable>
          <el-option
              v-for="item in tableData2"
             :key="item.id" :label="item.fjobnumber + '-' +item.fname"
             :value="item.fname"
          />
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogWorker=false">取 消</el-button>
        <el-button type="primary" @click="confirmUp">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  querytJxStaffList,
  queryWorkReportDetails,
  updateWorkReport, workReportAudit, workReportAuSubmit,
  workReportDelete,
  workReportSubmit, workReportUnAudit
} from "@/api/zhuye";
import JcTitle from "@/components/Title";
import {toMxBmina} from "@/utils/utils";

export default {
  components: {
    JcTitle,
    jcPagination: () => import('@/components/Pagination')
  },
  data() {
    return {
      fworker: '',
      dialogWorker: false,
      amountVis: true,
      indexSelf: 0,
      production: {},
      tableData: [],
      tableHeader: [
        {label: '序号', prop: 'ordinal', width: 60 },
        {label: '组别', prop: 'fgroupname', minWidth: '120px'},
        {label: '工序名称', prop: 'fprocessname', minWidth: '120px'},
        // { label: '材料名称-规格', prop: 'fremarkname', minWidth: '120px' },
        {label: '数量', prop: 'fqty', minWidth: '120px'},
        {label: '单价', prop: 'workprice', minWidth: '120px'},
        {label: '倍数', prop: 'fnum', minWidth: '120px'},
        {label: '汇总', prop: 'fprice', minWidth: '70px'},
        {label: '可报数量', prop: 'fenableworkqty', minWidth: '70px'},
        {label: '报工数量', type: 'bill', prop: 'fworkqtyview', minWidth: '120px'},
        { label: '样板单倍数', prop: 'fsamplemultiple', minWidth: '120px' },
        {label: '报工金额', prop: 'fsumprice', minWidth: '120px'},
        {label: '报工人', type: 'states', prop: 'fworker', minWidth: '150px'},
        {label: '备注', type: 'state', prop: 'fremark', minWidth: '120px'},
        {label: '操作', type: 'tag', width: '200px'},
      ],
      total: 0, // 总条目
      pageNum: 1, // 当前页
      size: 50, // 每页显示多少条数据
      fname: '',
      fduties: '',
      gropuName: '',
      val: [],
      tableData2: [],
      tableHeader2: [
        {label: '姓名', prop: 'fname'},
        {label: '单位/部门', prop: 'deptname'},
        {label: '现任职务', prop: 'fduties'}
      ],
      iswarker: false,
      isDisabled: false
    }
  },
  created() {
    this.workDetail()
  },
  methods: {
    // 详情
    workDetail() {
      queryWorkReportDetails({fid: this.$route.params.id}).then(res => {
        if (res.code === 0) {
          this.production = toMxBmina(res.data)
          this.tableData = res.data.details
          this.production.huizongSum = 0
          this.production.amountSum = 0
          this.tableData.map(item => {
            item.workprice = (item.fprice / item.fnum).toFixed(4)
            this.production.huizongSum += item.fprice
            this.production.amountSum += item.fsumprice
          })
          this.production.huizongSum = this.production.huizongSum.toFixed(2)
          this.production.amountSum = this.production.amountSum.toFixed(2)
          this.staffList()
          this.isDisabled = this.production.fdocumentstatus === '已审核' || this.production.fdocumentstatus === '审核中'
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    handleSelectAll(val) {
      this.indexArr = []
      val.forEach(res => {
        this.indexArr.push(res.index)
      })
    },
    // 批改
    confirmUp() {
      this.tableData.map((item, index) => {
        if (this.indexArr.includes(index)) {
          item.fworker = this.fworker
        }
      })
      this.dialogWorker = false
    },
    save() {
      this.iswarker = false
      this.tableData.forEach(res => {
        if (!res.fworker) {
          this.iswarker = true
        }
      })
      if (this.iswarker) {
        this.$confirm('请输入报工人！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
        return
      }
      this.production.details = this.tableData
      updateWorkReport({...this.production}).then(res => {
        if (res.code === 0) {
          this.submit(1)
          this.$message({showClose: true, message: res.message, type: 'success'})
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 提交
    submit(ev) {
      this.iswarker = false
      this.tableData.forEach(res => {
        if (!res.fworker) {
          this.iswarker = true
        }
      })
      if (this.iswarker && ev === 1) {
        this.$confirm('请输入报工人！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
        return
      }
      const api = ev === 1 ? workReportSubmit : workReportAuSubmit
      api({Numbers: [this.production.fbillNo]}).then(res => {
        if (res.code === 0) {
          if (ev === 1) {
            this.audit(1)
          } else {
            this.workDetail()
          }
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 审核
    audit(ev) {
      const api = ev === 1 ? workReportAudit : workReportUnAudit
      api({Numbers: [this.production.fbillNo]}).then(res => {
        if (res.code === 0) {
          this.workDetail()
          this.$message({ showClose: true, message: '操作成功', type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 删除
    delorder() {
      if (this.isDisabled) {
        this.$confirm('只有创建、重新审核状态的单据才可以删除！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
        return
      }
      this.$confirm('确定要删除该报工单么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        workReportDelete({Numbers: [this.production.fbillNo]}).then(res => {
          if (res.code === 0) {
            this.$router.push({
              path: '/'
            })
            this.$message({showClose: true, message: res.message, type: 'success'})
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    },
    // 复制行
    copyHang(index) {
      const item = this.tableData[index]
      this.tableData.splice(index + 1, 0, {...item, fentryid: 0 })
      this.sumAmount()
    },
    delHang(index) {
      this.tableData.splice(index, 1)
      this.sumAmount()
    },
    // 监听报工数量
    handelPrice(index) {
      // 报工金额 = 汇总*报工数量
      const item = this.tableData[index]
      item.fsumprice = (item.workprice * item.fworkqtyview * item.fsamplemultiple).toFixed(2)
      this.sumAmount()
    },
    sumAmount() {
      let huizongSum = 0
      let amountSum = 0
      this.tableData.forEach(item => {
        huizongSum += Number(item.fprice)
        amountSum += Number(item.fsumprice)
      })
      this.production.huizongSum = huizongSum.toFixed(2)
      this.production.amountSum = amountSum.toFixed(2)
      this.amountVis = false
      this.$nextTick(() =>{
        this.amountVis = true
      })
    },
    // 获取列表
    staffList() {
      this.fgroupArr = []
      this.tableData.forEach(res => {
        this.fgroupArr.push(res.fgroupid)
      })
      this.fgroupArr = Array.from(new Set(this.fgroupArr))
      const DATA = {
        pageNum: this.pageNum,
        pageSize: 1000,
        groupId: this.fgroupArr,
        search: [
          {fid: 7, field: 'fname', seach: this.fname}
        ]
      }
      querytJxStaffList(DATA).then(res => {
        if (res.code === 0) {
          this.tableData2 = res.data.array
          this.total = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  margin-top: 65px;
  padding: 10px;

  .flex {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;

    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }
}
</style>
